<template>
	<view class="list" :style="{'margin-top':CustomBar + 'px'}">
		<block v-for="(item, index) in listDatas" :key="index">
			<view class="list_detail" @click.stop="onclick(item)">
				<slot :item="item"></slot>
			</view>
		</block>
	</view>
</template>

<script>
	//列表布局组件
	//@group 业务组件
	export default {
		name: 'list',
		//
		data() {
			return {
			};
		},
		//
		props: {
			//列表内对象的数据集合
			listDatas: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			}
		},
		methods: {
			onclick(item) {
				//点击列表内对象后回调
				//@arg 向父组件传递列表内对象（item）
				this.$emit('list:click', item)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;

		.list_detail {
			background: $uni-bg-color;
			padding: $xj-standard-padding;
			border-radius: $xj-standard-border-radius;
			margin: 15rpx;
		}
	}
</style>